import * as React from 'react';
import * as ReactDOM from 'react-dom';

var $ = require("jquery");
            // info  显示图片控件
var WinMark = React.createClass({
    getDefaultProps: function () {
        return {
           show:false
        }
    },

    render: function () {
        var css = "winmark " + (this.props.show?" ":"hide");
        ////console.log(" .................... winmark say :"+css)
        return (
            <div onClick={this.onClick} className={css}></div>
        );
    }
});



var Dialog = React.createClass({
    getDefaultProps: function () {
        return {
           show:false,
           title:"设置个title???????",
        }
    },
    componentDidMount:function(){
        console.info("计算                          ")
        var $parent = $(ReactDOM.findDOMNode(this));
        var $target = $(".winWarn",$parent);
        var left = ($(window).width()-180-$target.width())/2+180;
        var top = ($(window).height()-49-$target.height())/2+49;
        $target.css({
            left:left>0?left:0,
            top:top>0?top:0,
            height:$target.height(),
            overflow:"auto"
        })
    },
    cancelEditSuppler:function(){
        this.props.offWindow();
    },

    render: function () {
        var css = "winWarn " + (this.props.show?" ":"hide");
        return (
            <div className="temp">
                    <WinMark show={this.props.show} />
                    <div className={css}>
                            <div className="warn-d one">
                                <div className="win-up">
                                    <span>{this.props.title}</span><span className="iconfont icon-tabiconclose" onClick={this.cancelEditSuppler}></span>
                                </div>
                                    <div className="dialog-content jcenter">
                                        {this.props.children}
                                    </div>
                                </div>
                    </div>
            </div>
        )
    }
});


var DialogTimeClose = React.createClass({
    getDefaultProps: function () {
        return {
           show:false,
           title:"设置个title???????",
           callBack:function(){
                console.log("回调")
           }
        }
    },
    getInitialState: function () {
            return {num:3,isStart:false}
    },
    componentWillMount:function(){

    },
    fixedPostion:function(){
        // /componentDidUpdate
        console.info("计算                          ")
        var $parent = $(ReactDOM.findDOMNode(this));
        var $target = $(".winWarn",$parent);
        var left = ($(window).width()-180-$target.width())/2+180;
        var top = ($(window).height()-49-$target.height())/2+49;
        $target.css({
            left:left>0?left:0,
            top:top>0?top:0
        })
    },
    componentWillReceiveProps:function(nextprops){
        if(nextprops.show){
                  this.setState({
                    num:3,
                    isStart:true
                })
        }
        console.log("ccccccccccccccccccc")
    },
    componentDidUpdate:function(nextprops,nextState){
        this.state.isStart&&this.fixedPostion();
        if(this.state.num<=0&&this.props.show==true&&this.state.isStart){
            this.props.callBack();
            clearInterval(this.interval);
            this.setState({
                isStart:false
            })
        }else if(this.state.num<0){
            clearInterval(this.interval);
            return false;
        }
        if(this.props.show&&this.state.num==3){
            var changeState = this.setState;
            var num = this.state.num;
            this.interval = setInterval(function(){
                console.info("定时任务 开启");
                 this.setState({
                    isStart:true,
                    num:this.state.num-1
                })
            }.bind(this),1000)
        }

    },
    render: function () {
        var css = "winWarn " + (this.state.isStart?" ":"hide");
        return (
            <div className="temp">
                    <WinMark show={this.state.isStart} />
                     <div className={css}>
                        <div className="warn">
                                <p className="win-creat-success"><span></span><span>{this.props.title},</span><span>倒计时跳转{this.state.num}...</span></p>
                        </div>
                    </div>
            </div>
        )
    }
});




var Ok = React.createClass({
    getDefaultProps: function () {
        return {
           message:"创建成功！",
        }
    },
    render: function () {
        var css = "winWarn " + (this.props.show?" ":"hide");
        return (
            <div className="temp">
                    <WinMark show={this.props.show} />
                    <div className={css}>
                        <div className="warn">
                            <p className="win-creat-success"><span></span><span>创建成功！</span></p>
                        </div>
                    </div>
            </div>
        )
    }
});

var ISDEL = React.createClass({
    getDefaultProps: function () {
        return {
           message:"创建成功！",
        }
    },
    render: function () {
        var css = "winWarn " + (this.props.show?" ":"hide");
        return (
            <div className="temp">
                    <WinMark show={this.props.show} />
                    <div className={css}>
                        <div className="warn">
                            <p className="win-creat-success"><span></span><span>创建成功！</span></p>
                        </div>
                    </div>
            </div>
        )
    }
});


/*

  <div class="winWarn hide">
                    <div class="warn-d">
                        <div class="win-up">
                            <span>删除确认</span><span class="icon icon-del"></span>
                        </div>
                        <div class="win-content">
                            <p>确认删除该活动吗？</p>
                        </div>
                        <div class="win-btn">
                            <button class="btn btn-success">删除</button>
                            <button class="btn btn-success">提交</button>
                        </div>
                    </div>
                </div>



                <div class="winWarn hide">
                    <div class="warn">
                        <p class="win-creat-success"><span></span><span>创建成功！</span></p>
                    </div>
                </div>

 */


/*  <div class="winWarn ">
                    <div class="warn-d">
                        <div class="win-up">
                            <span>删除确认</span><span class="icon icon-del"></span>
                        </div>

                        */
module.exports = {
    WinMark: WinMark,
    Dialog: Dialog,
    DialogTimeClose:DialogTimeClose
}
